<template>
  <el-dialog title="新增车型" :visible="showDialog" @close="close">
    <el-form label-width="120px" :model="addList" :rules="rules">
      <el-form-item label="车辆类型" prop="truckTypes">
        <el-input v-model="addList.truckTypes" placeholder="请输入车辆类型" style="width: 80%" size="mini" />
      </el-form-item>
      <el-form-item label="应载重量" prop="allowableLoad">
        <el-input v-model="addList.allowableLoad" placeholder="请输入车型载重" style="width: 80%" size="mini" append="位于输入框尾部的内容" />
        <span>吨</span>
      </el-form-item>
      <el-form-item label="应载体积" prop="allowableVolume">
        <el-input v-model="addList.allowableVolume" placeholder="请输入车型体积" style="width: 80%" size="mini" />
        <span>立方</span>
      </el-form-item>
      <el-form-item label="长" prop="measureLong">
        <el-input v-model="addList.measureLong" placeholder="请输入长" size="mini" style="width: 80%" />
        <span>米</span>
      </el-form-item>
      <el-form-item label="宽" prop="measureWidth">
        <el-input v-model="addList.measureWidth" placeholder="请输入宽" size="mini" style="width: 80%" />
        <span>米</span>
      </el-form-item>
      <el-form-item label="高" prop="measureHigh">
        <el-input v-model="addList.measureHigh" placeholder="请输入高" size="mini" style="width: 80%" />
        <span>米</span>
      </el-form-item>
      <el-form-item>
        <!-- 按钮 -->
        <el-row type="flex" justify="center">
          <el-col :span="12">
            <el-button size="mini" style="color:#fff;backgroundColor:#e2553b">确定</el-button>
            <el-button size="mini">取消</el-button>
          </el-col>
        </el-row>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
export default {
  name: 'AddDept',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      addList: {
        truckTypes: '',
        allowableLoad: '',
        allowableVolume: '',
        measureLong: '0.0',
        measureWidth: '0.0',
        measureHigh: '0.0'
      },
      rules: {
        truckTypes: [
          { required: true, message: '车型名称不能为空', trigger: 'blur' },
          { trigger: 'blur', validator: (_, value, callback) => {
            if (value < '1' || value > '100') {
              callback(new Error('只可输入1-100之间的整数'))
            } else {
              callback()
            }
          } }
        ],
        allowableLoad: [
          { required: true, message: '应载重量不能为空', trigger: 'blur' },
          { trigger: 'blur', validator: (_, value, callback) => {
            if (value < '1' || value > '100') {
              callback(new Error('只可输入1-100之间的整数'))
            } else {
              callback()
            }
          } }
        ],
        allowableVolume: [
          { required: true, message: '应载体积不能为空', trigger: 'blur' },
          { trigger: 'blur', validator: (_, value, callback) => {
            if (value < '1' || value > '100') {
              callback(new Error('只可输入1-100之间的整数'))
            } else {
              callback()
            }
          } }

        ],
        measureLong: [
          { required: true, message: '车型长度不能为空', trigger: 'blur' },
          { trigger: 'blur', validator: (_, value, callback) => {
            if (value < '1' || value > '100') {
              callback(new Error('长最多只能输入100,请重新输入'))
            } else {
              callback()
            }
          } }
        ],
        measureWidth: [
          { required: true, message: '车型宽度不能为空', trigger: 'blur' },
          { trigger: 'blur', validator: (_, value, callback) => {
            if (value < '1' || value > '100') {
              callback(new Error('宽最多只能输入100,请重新输入'))
            } else {
              callback()
            }
          } }
        ],
        measureHigh: [
          { required: true, message: '车型高度不能为空', trigger: 'blur' },
          { trigger: 'blur', validator: (_, value, callback) => {
            if (value < '1' || value > '100') {
              callback(new Error('高最多只能输入100,请重新输入'))
            } else {
              callback()
            }
          } }
        ]
      }
    }
  }, methods: {
    close() {
      this.$emit('update:Dialog', false)
    }
  }
}
</script>
<style>
</style>
